<template>
  <div class="alarm-unlock">
    <el-row style="paddingBottom: 0">
      <el-col :span="24">
        <dynForm :info-form="infoForm" :search-tags="searchTags" :select-list="selectList" label-width="140px">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t("search") }}</el-button
            >
        </dynForm>
      </el-col>
    </el-row>
    <!-- 表单部分 -->
    <el-card shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
        />
      </el-row>
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <actionForm ref="actionForm"/>
    <unlockRemarkModel ref="unlockRemarkModel" @initList="initList"/>
  </div>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import actionForm from './components/actionForm'
import { getList } from '@/api/alarm/unlock'
import { getEqpNameList } from '@/api/equipment/eqpbase'
import unlockRemarkModel from './components/unlockRemark.vue'
export default {
  name: 'AlarmUnlock',
  components: { actionForm, unlockRemarkModel },
  mixins: [mySetting],
  data() {
    const stateList = [{ id: 0, name: '解锁中' }, { id: 1, name: '解锁成功' }, { id: 2, name: '解锁失败' }]
    return {
      infoForm: {},
      searchTags: [
        { label: this.$t('eqpId'), prop: 'eqpId', tag: 'DynSelect' },
        { label: this.$t('alarmId'), prop: 'alarmId', tag: 'DynInput' },
        { label: this.$t('alarmDate'), prop: 'alarmTime', tag: 'Dyndate' },
        { label: this.$t('unlockDate'), prop: 'unlockTime', tag: 'Dyndate' },
        { label: this.$t('CurrentState'), prop: 'state', tag: 'DynSelect' }
      ],
      selectList: {
        state: stateList
      },
      tableColumns: [
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        // { prop: 'eqpModel', label: this.$t('eqpModel') },
        { prop: 'eqpID', label: this.$t('eqpId') },
        { prop: 'alarmID', label: this.$t('alarmId') },
        { prop: 'alarmDesc', label: this.$t('alarmDescription') },
        { prop: 'alarmTime', label: this.$t('alarmDate') },
        { prop: 'unLockTime', label: this.$t('unlockDate') },
        { prop: 'state', label: this.$t('CurrentState'), templete: (_scope) => {
          const stateArr = ['解锁中', '解锁成功', '解锁失败']
          return (
            <span>{stateArr[_scope.row.state]}</span>
          )
        } },
        { prop: 'createTimeStr', label: this.$t('createTime') },
        { prop: 'editTimeStr', label: this.$t('editeTime') },
        { prop: 'unLockId', label: this.$t('action'), width: '80px', templete: (_scope) => {
          if (!_scope.row.unLockId) {
            return (
              <el-link type='primary' underline={false}
                vOn:click={() => this.handleUnlock(_scope.row)}
              >{this.$t('unlock')}</el-link>
            )
          }
        } }
      ],
      tableData: [],
      tableLoading: true
    }
  },
  created() {
    this.initList()
    this.getEqpIdList()
  },
  mounted() {},
  methods: {
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    initList() {
      getList(this.$clearNull({ ...this.infoForm, ...this.listQuery })).then(res => {
        this.tableData = res.data
        this.total = res.total
        this.tableLoading = false
      })
    },
    handleUnlock(row) {
      this.$refs.unlockRemarkModel.handleOpen(row)
    },
    getEqpIdList() {
      getEqpNameList().then(res => {
        this.$set(this.selectList, 'eqpId', res.data)
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
</style>
